<template>
  <el-dialog
    title="焊接数据"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="clear">
    <!--    <div class="line">-->
    <!--       <div id="main" style="width:80%;height: 600px" ref="main">-->


    <!--       </div>-->

    <!--    </div>-->
    <div class="line">
      <div class="container">
        <div class="upper">
          <div class="box"><p><strong>焊机编号:</strong> {{ machine && machine.wmNo }}</p></div>
          <div class="box"><p><strong>焊机型号:</strong> {{ machine && machine.wmModel }}</p></div>
          <div class="box"><p><strong>焊机品牌:</strong> {{ machine && machine.wmBrand }}</p></div>
          <div class="box"><p><strong>序列号:</strong> {{ machine && machine.collModelCode }}</p></div>
          <div class="box"><p><strong>IP地址:</strong> {{ machine && machine.wmIp }}</p></div>
          <div class="box"><p><strong>额定功率:</strong> {{ machine && machine.power }}</p></div>
          <div class="box"><p><strong>数采编号:</strong> {{ machine && machine.collBoxNo }}</p></div>
          <div class="box"><p><strong>采集表号:</strong> {{ machine && machine.collTableNo }}</p></div>
          <div class="box"><p><strong>Mac地址:</strong> {{ machine && machine.wmMac }}</p></div>
          <div class="box"><p><strong>焊机描述:</strong> {{ machine && machine.wmComment }}</p></div>
          <div class="box"><p><strong>电流上限:</strong> {{ machine && machine.maxWpa }}</p></div>
          <div class="box"><p><strong>电压上限:</strong> {{ machine && machine.maxWpv }}</p></div>
        </div>

        <div class="lower">
          <div class="left">
            <div id="main" ref="main" style="height:600px;border: 1px red solid">
              <!-- Echarts图表的代码将会在这里 -->
            </div>
          </div>
          <div class="right">
            <div class="box">工艺名称: {{ machine && machine.welTechnology.technologyName }}</div>
            <div class="box">工艺编码: {{ machine && machine.welTechnology.technologyCode }}</div>
            <div class="box">更新时间: {{ machine && machine.welTechnology.updateTime }}</div>
            <div class="box">工艺说明: {{ machine && machine.welTechnology.technologyComment }}</div>
            <div class="box">焊接方式: {{ machine && machine.welTechnology.weldMethod }}</div>
            <div class="box">保护气体: {{ machine && machine.welTechnology.weldGas }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import $ from 'jquery'
import * as echarts from 'echarts';
export default {
  name: 'wavehistory',
  data(){
    return {
      dataForm: {
        key: ''
      },
      gwsn: '',
      timer1: null,
      machine: null,
      datajson: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      Visiable: false,
      dialogVisible:false,
      aa: false,
      valueDate: '',
      area: {
        area1: ''
      }
    }
  },
  created () {
    // clearInterval(this.timer)
    // this.timer = null
    // this.setTimer()
  },
  mounted () {
    this.timer1 = setInterval(() => {     //绑定在 const 普通变量身上，不要绑定在 this上
      console.log(this.timer1)
      this.listData(this.gwsn);
      console.log('开始定时...每过5秒执行一次')
      this.getCurrentTime()
    }, 5000)

    // this.setTimer()
    // this.timer = setInterval(() => {
    //   this.listData(this.gwsn)
    //   console.log()
    // }, 5000)
    // this.getAllPromis()
    // this.nowData()
    // this.$nextTick(function () {
    //   this.nowData();
    // });
  },
  beforeDestroy () {
    // console.log("vue定时方法结束了?")
    // // 每次离开当前界面时，清除定时器
    // console.log(this.timer1)
    // clearInterval(this.timer1)
    // this.timer1 = null
    // console.log("vue定时方法结束了")
  },
  methods:{
    clear(){
      // clearInterval(this.timer1)
      console.log(this.timer1)
      console.log("vue定时方法结束了")
      this.dialogVisible = false;
    },
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      _this.gettime = yy+'/'+mm+'/'+dd+' '+hh+':'+mf+':'+ss;
      console.log(_this.gettime)
    },
    nowData(){
      var myChart1 = echarts.init(document.getElementById('main'));
      var data = this.DataList;
      // Sort the rows based on the time property
      data.rows.sort((a, b) => new Date(a.time) - new Date(b.time));

      // Extract the necessary data for the chart
      var xAxisData = data.rows.map(row => row.time);
      var uData = data.rows.map(row => parseFloat(row.u));
      var iData = data.rows.map(row => parseFloat(row.i));
      var pData = data.rows.map(row => parseFloat(row.p));
// 绘制图表
      myChart1.setOption({
        // 'title': {
        //   'text': '焊机数据'
        // },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': [ '电压', '电流', '功率' ]
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': { }
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'axisTick': {
            alignWithLabel: true
          },
          // 'data': [ '1', '2', '3', '4', '5', '6', '7' ]
          'data': xAxisData
        },
        // 'yAxis': {
        //   'type': 'value'
        // },
        'yAxis': [
          {
            type: 'value',
            name: '电流',
            position: 'left',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5470c6'
              }
            },
            axisLabel: {
              formatter: '{value} A'
            }
          },
          {
            type: 'value',
            name: '电压',
            position: 'right',
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#91CC75'
              }
            },
            axisLabel: {
              formatter: '{value} V'
            }
          },{
            type: 'value',
            name: '功率',
            position: 'right',
            offset: 30,
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#EE6666'
              }
            },
            axisLabel: {
              formatter: '{value} W'
            }
          }
        ],
        'series': [
          {
            'name': '电压',
            'type': 'line',
            'smooth': true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2"
            },
            'stack': '总量',
            // 'data': [ 120, 132, 101, 134, 90, 230, 210 ]
            'data': uData
          },
          {
            'name': '电流',
            'type': 'line',
            'smooth': true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2"
            },
            'stack': '总量',
            // 'data': [ 220, 182, 191, 234, 290, 330, 310 ]
            'data': iData
          },
          {
            'name': '送丝速度',
            'type': 'line',
            'smooth': true,
            // 单独修改当前线条的样式
            lineStyle: {
              color: "#0184d5",
              width: "2"
            },
            'stack': '总量',
            'data': pData
            // 'data': [ 500, 520, 503, 516, 560, 543, 500 ]
          }
        ]
      });
    },

    listData(gwSN) {
      // 在这里使用gwSN进行需要的操作
      console.log('另一个方法使用的值为' + gwSN);
      var today = new Date();
      var year = today.getFullYear();
      var month = today.getMonth() + 1;
      var day = today.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      const startDate = year + "-" + month + "-" + day
      // console.log("当前日期");
      // console.log(startDate);

      // 进行其他操作...
      this.$http({
        url: this.$http.adornUrl('/wmstate/weldingmachinestate/listData'),
        method: 'get',
        params: this.$http.adornParams({
          'gwsn': gwSN,
          'startDate': startDate
        })
      }).then(({data}) => {
        // console.log("----------listData----------")
        // console.log(data)
        // console.log("----------listData----------")
        this.DataList = data
        // console.log(this.DataList)
        this.nowData()
      })
    },

    init(gwSN){
      this.dialogVisible = true;
      console.log('子组件名称为' + gwSN)
      this.gwsn = gwSN;
      this.$http({
        url: this.$http.adornUrl('/wmstate/weldingmachinestate/listMachineInfo'),
        method: 'get',
        params: this.$http.adornParams({
          'collModelCode': gwSN
        })
      }).then(({data}) => {
        // console.log("--------------------")
        // console.log(data)
        // console.log(data.rows[0])
        // console.log("--------------------")
        this.machine = data.rows[0];
        // this.nowData()
        this.listData(gwSN);
      })

      this.dataListLoading = false
    }
  }
}
</script>

<style scoped>
.container {
  width: 900px;
}

.upper {
  height: 200px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
  margin-bottom: 20px;
}

.lower {
  display: flex;
  height: 600px;
}

.left {
  flex: 0 0 calc(85% - 10px);
  height: 100%;
  margin-right: 20px;
}

.right {
  flex: 0 0 calc(15% - 10px);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 10px;
}

.box {
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
  /*height: 50%;*/
}
</style>

<!--<template>-->
<!--  <el-dialog-->
<!--    title="焊接历史数据"-->
<!--    :visible.sync="dialogVisible"-->
<!--    width="1000px">-->
<!--    <div class="line">-->
<!--      <div>-->
<!--        <el-button @click="prevDay"id="preButton">前一天</el-button>-->
<!--        <el-date-picker-->
<!--          v-model="valueDate"-->
<!--          type="date"-->
<!--          @change="handleChange"-->
<!--        ></el-date-picker>-->
<!--        <el-button @click="nextDay" id="nextButton">后一天</el-button>-->
<!--      </div>-->
<!--      <div id="main" style="width:100%;height: 600px;" ref="main">-->

<!--      </div>-->
<!--    </div>-->

<!--&lt;!&ndash;    <el-row :gutter="20">&ndash;&gt;-->
<!--&lt;!&ndash;      <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-card>&ndash;&gt;-->
<!--&lt;!&ndash;          <div id="main" class="mod-home" style="width: 300px;height: 300px;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-card>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-card>&ndash;&gt;-->
<!--&lt;!&ndash;          <div id="main1" class="mod-home" style="width: 300px;height: 300px;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-card>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-card>&ndash;&gt;-->
<!--&lt;!&ndash;          <div id="main2" class="mod-home" style="width: 300px;height: 300px;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-card>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;      <el-col :span="12">&ndash;&gt;-->
<!--&lt;!&ndash;        <el-card>&ndash;&gt;-->
<!--&lt;!&ndash;          <div id="main3" class="mod-home" style="width: 300px;height: 300px;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-card>&ndash;&gt;-->
<!--&lt;!&ndash;      </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;    </el-row>&ndash;&gt;-->
<!--&lt;!&ndash;    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">&ndash;&gt;-->
<!--  </el-dialog>-->
<!--</template>-->

<!--<script>-->
<!--import $ from 'jquery'-->
<!--import * as echarts from 'echarts';-->
<!--export default {-->
<!--  name: 'wavehistory',-->
<!--  data(){-->
<!--    return {-->
<!--      dataForm: {-->
<!--        key: ''-->
<!--      },-->
<!--      datajson: [],-->
<!--      dataList: [],-->
<!--      pageIndex: 1,-->
<!--      pageSize: 10,-->
<!--      totalPage: 0,-->
<!--      dataListLoading: false,-->
<!--      dataListSelections: [],-->
<!--      addOrUpdateVisible: false,-->
<!--      Visiable: false,-->
<!--      dialogVisible:false,-->
<!--      aa: false,-->
<!--      valueDate: '',-->
<!--      area: {-->
<!--        area1: ''-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  mounted () {-->
<!--    this.valueDate = new Date()-->
<!--  },-->
<!--  methods:{-->
<!--    nowData(){-->
<!--      this.$http({-->
<!--        url: this.$http.adornUrl('/equipinfo/equipinfotable/num'),-->
<!--        method: 'get'-->
<!--      }).then(({data}) => {-->
<!--        var myChart1 = echarts.init(document.getElementById('main'));-->
<!--// 绘制图表-->
<!--        myChart1.setOption({-->
<!--          'title': {-->
<!--            'text': '焊机数据'-->
<!--          },-->
<!--          'tooltip': {-->
<!--            'trigger': 'axis'-->
<!--          },-->
<!--          'legend': {-->
<!--            'data': [ '电压', '电流', '送丝速度' ]-->
<!--          },-->
<!--          'grid': {-->
<!--            'left': '3%',-->
<!--            'right': '4%',-->
<!--            'bottom': '3%',-->
<!--            'containLabel': true-->
<!--          },-->
<!--          'toolbox': {-->
<!--            'feature': {-->
<!--              'saveAsImage': { }-->
<!--            }-->
<!--          },-->
<!--          'xAxis': {-->
<!--            'type': 'category',-->
<!--            'boundaryGap': false,-->
<!--            'axisTick': {-->
<!--              alignWithLabel: true-->
<!--            },-->
<!--            'data': [ '1', '2', '3', '4', '5', '6', '7' ]-->
<!--          },-->
<!--          // 'yAxis': {-->
<!--          //   'type': 'value'-->
<!--          // },-->
<!--          'yAxis': [-->
<!--            {-->
<!--              type: 'value',-->
<!--              name: '电流',-->
<!--              position: 'left',-->
<!--              alignTicks: true,-->
<!--              axisLine: {-->
<!--                show: true,-->
<!--                lineStyle: {-->
<!--                  color: '#5470c6'-->
<!--                }-->
<!--              },-->
<!--              axisLabel: {-->
<!--                formatter: '{value} m'-->
<!--              }-->
<!--            },-->
<!--            {-->
<!--              type: 'value',-->
<!--              name: '电压',-->
<!--              position: 'right',-->
<!--              alignTicks: true,-->
<!--              axisLine: {-->
<!--                show: true,-->
<!--                lineStyle: {-->
<!--                  color: '#91CC75'-->
<!--                }-->
<!--              },-->
<!--              axisLabel: {-->
<!--                formatter: '{value} m'-->
<!--              }-->
<!--            },{-->
<!--              type: 'value',-->
<!--              name: '送气',-->
<!--              position: 'right',-->
<!--              offset: 30,-->
<!--              alignTicks: true,-->
<!--              axisLine: {-->
<!--                show: true,-->
<!--                lineStyle: {-->
<!--                  color: '#EE6666'-->
<!--                }-->
<!--              },-->
<!--              axisLabel: {-->
<!--                formatter: '{value} m'-->
<!--              }-->
<!--            }-->
<!--          ],-->
<!--          'series': [-->
<!--            {-->
<!--              'name': '电压',-->
<!--              'type': 'line',-->
<!--              'smooth': true,-->
<!--              // 单独修改当前线条的样式-->
<!--              lineStyle: {-->
<!--                color: "#0184d5",-->
<!--                width: "2"-->
<!--              },-->
<!--              'stack': '总量',-->
<!--              'data': [ 120, 132, 101, 134, 90, 230, 210 ]-->
<!--            },-->
<!--            {-->
<!--              'name': '电流',-->
<!--              'type': 'line',-->
<!--              'smooth': true,-->
<!--              // 单独修改当前线条的样式-->
<!--              lineStyle: {-->
<!--                color: "#0184d5",-->
<!--                width: "2"-->
<!--              },-->
<!--              'stack': '总量',-->
<!--              'data': [ 220, 182, 191, 234, 290, 330, 310 ]-->
<!--            },-->
<!--            {-->
<!--              'name': '送丝速度',-->
<!--              'type': 'line',-->
<!--              'smooth': true,-->
<!--              // 单独修改当前线条的样式-->
<!--              lineStyle: {-->
<!--                color: "#0184d5",-->
<!--                width: "2"-->
<!--              },-->
<!--              'stack': '总量',-->
<!--              'data': [ 500, 520, 503, 516, 560, 543, 500 ]-->
<!--            }-->
<!--          ]-->
<!--        });-->
<!--      })-->
<!--    },-->
<!--    prevDay() {-->
<!--      this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() - 1))-->
<!--      this.handleChange();-->
<!--      //console.log($(this).index()+1)-->
<!--    },-->
<!--    nextDay() {-->
<!--      this.valueDate = new Date(this.valueDate.setDate(this.valueDate.getDate() + 1))-->
<!--      this.handleChange();-->
<!--      //console.log($(this).index()+2)-->
<!--    },-->
<!--    handleChange() {-->
<!--      // 在这里可以执行你想要的操作，比如请求数据等等-->
<!--      console.log(this.valueDate);-->
<!--    },-->
<!--//     empChart(){-->
<!--//       this.$http({-->
<!--//         url: this.$http.adornUrl('/emp/employee/num'),-->
<!--//         method: 'get'-->
<!--//       }).then(({data}) => {-->
<!--//         var yearData = [-->
<!--//           {-->
<!--//             year: "2020", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [24, 90, 15, 180, 90, 220, 210, 10, 60, 250, 150, 30],-->
<!--//               // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]-->
<!--//             ]-->
<!--//           },-->
<!--//           {-->
<!--//             year: "2021", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],-->
<!--//              // [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]-->
<!--//             ]-->
<!--//           }-->
<!--//         ];-->
<!--//         // console.log(data[0].actor)-->
<!--//         // 基于准备好的dom，初始化echarts实例-->
<!--//         var myChart1 = echarts.init(document.getElementById('main'));-->
<!--// // 绘制图表-->
<!--//         var option = {-->
<!--//             title: {-->
<!--//               text: '电流历史数据'-->
<!--//             },-->
<!--//             // 通过这个color修改两条线的颜色  , "#ed3f35"-->
<!--//             color: ["#6FEEEF"],-->
<!--//             tooltip: {-->
<!--//               trigger: "axis"-->
<!--//             },-->
<!--//             legend: {-->
<!--//               // 如果series 对象有name 值，则 legend可以不用写data-->
<!--//               // 修改图例组件 文字颜色-->
<!--//               textStyle: {-->
<!--//                 color: "#4c9bfd"-->
<!--//               },-->
<!--//               // 这个10% 必须加引号-->
<!--//               right: "10%"-->
<!--//             },-->
<!--//             grid: {-->
<!--//               top: "20%",-->
<!--//               left: "3%",-->
<!--//               right: "4%",-->
<!--//               bottom: "3%",-->
<!--//               // show: true, // 显示边框-->
<!--//               borderColor: "#012f4a", // 边框颜色-->
<!--//               containLabel: true // 包含刻度文字在内-->
<!--//             },-->
<!--//-->
<!--//             xAxis: {-->
<!--//               type: "category",-->
<!--//               boundaryGap: false,-->
<!--//               data: [-->
<!--//                 "11:41",-->
<!--//                 "11:42",-->
<!--//                 "11:43",-->
<!--//                 "11:44",-->
<!--//                 "11:45",-->
<!--//                 "11:46",-->
<!--//                 "11:47",-->
<!--//                 "11:48",-->
<!--//                 "11:49",-->
<!--//                 "11:50",-->
<!--//                 "11:51",-->
<!--//                 "11:52"-->
<!--//               ],-->
<!--//               axisTick: {-->
<!--//                 show: false // 去除刻度线-->
<!--//               },-->
<!--//               axisLabel: {-->
<!--//                 color: "#4c9bfd" // 文本颜色-->
<!--//               },-->
<!--//               axisLine: {-->
<!--//                 show: false // 去除轴线-->
<!--//               }-->
<!--//             },-->
<!--//             yAxis: {-->
<!--//               type: "value",-->
<!--//               axisTick: {-->
<!--//                 show: false // 去除刻度线-->
<!--//               },-->
<!--//               axisLabel: {-->
<!--//                 color: "#4c9bfd" // 文本颜色-->
<!--//               },-->
<!--//               axisLine: {-->
<!--//                 show: false // 去除轴线-->
<!--//               },-->
<!--//               splitLine: {-->
<!--//                 lineStyle: {-->
<!--//                   color: "#012f4a" // 分割线颜色-->
<!--//                 }-->
<!--//               }-->
<!--//             },-->
<!--//             series: [-->
<!--//               {-->
<!--//                 // name: "新增粉丝",-->
<!--//                 type: "line",-->
<!--//                 // true 可以让我们的折线显示带有弧度-->
<!--//                 smooth: true,-->
<!--//                 data: yearData[0].data[0]-->
<!--//               },-->
<!--//               {-->
<!--//                 // name: "新增游客",-->
<!--//                 type: "line",-->
<!--//                 smooth: true,-->
<!--//                 data: yearData[0].data[1]-->
<!--//               }-->
<!--//             ]-->
<!--//           };-->
<!--//         myChart1.setOption(option);-->
<!--//-->
<!--//         //测试-->
<!--//         $("#preButton").on("click",function (){-->
<!--//           console.log($(this).index());-->
<!--//           console.log(yearData[$(this).index()]);-->
<!--//           var obj = yearData[$(this).index()+1];-->
<!--//           option.series[0].data = obj.data[0];-->
<!--//           console.log(yearData[$(this).index()+1])-->
<!--//           console.log(option.series[1].data)-->
<!--//           myChart1.setOption(option);-->
<!--//         })-->
<!--//         //-->
<!--//         $("#nextButton").on("click",function (){-->
<!--//           console.log($(this).index()-1);-->
<!--//           //console.log(yearData[$(this).index()-2]);-->
<!--//           var obj = yearData[$(this).index()-2];-->
<!--//           option.series[0].data = obj.data[0];-->
<!--//           console.log(obj.data[0])-->
<!--//           myChart1.setOption(option);-->
<!--//         })-->
<!--//         // 5.点击切换效果-->
<!--//         // $(".line h2").on("click", "a", function() {-->
<!--//         //   // alert(1);-->
<!--//         //    console.log($(this).index());-->
<!--//         //   // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象-->
<!--//         //   // console.log(yearData[$(this).index()]);-->
<!--//         //   var obj = yearData[$(this).index()];-->
<!--//         //   //console.log(obj)-->
<!--//         //   option.series[0].data = obj.data[0];-->
<!--//         //   option.series[1].data = obj.data[1];-->
<!--//         //   // 需要重新渲染-->
<!--//         //   myChart1.setOption(option);-->
<!--//         // });-->
<!--//       })-->
<!--//     },-->
<!--//     posChart(){-->
<!--//       this.$http({-->
<!--//         url: this.$http.adornUrl('/m/material/num'),-->
<!--//         method: 'get'-->
<!--//       }).then(({data}) => {-->
<!--//         var yearData = [-->
<!--//           {-->
<!--//             year: "2020", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],-->
<!--//               //[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],-->
<!--//               // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]-->
<!--//             ]-->
<!--//           }-->
<!--//           ,-->
<!--//           {-->
<!--//             year: "2021", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34],-->
<!--//               //[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],-->
<!--//               //[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]-->
<!--//             ]-->
<!--//           }-->
<!--//         ];-->
<!--//         // console.log(data[0].actor)-->
<!--//         // 基于准备好的dom，初始化echarts实例-->
<!--//         var myChart1 = echarts.init(document.getElementById('main1'));-->
<!--// // 绘制图表-->
<!--//         var option = {-->
<!--//           title: {-->
<!--//             text: '电压历史数据'-->
<!--//           },-->
<!--//           // 通过这个color修改两条线的颜色  , "#ed3f35"-->
<!--//           color: ["#6FEEEF"],-->
<!--//           tooltip: {-->
<!--//             trigger: "axis"-->
<!--//           },-->
<!--//           legend: {-->
<!--//             // 如果series 对象有name 值，则 legend可以不用写data-->
<!--//             // 修改图例组件 文字颜色-->
<!--//             textStyle: {-->
<!--//               color: "#4c9bfd"-->
<!--//             },-->
<!--//             // 这个10% 必须加引号-->
<!--//             right: "10%"-->
<!--//           },-->
<!--//           grid: {-->
<!--//             top: "20%",-->
<!--//             left: "3%",-->
<!--//             right: "4%",-->
<!--//             bottom: "3%",-->
<!--//             // show: true, // 显示边框-->
<!--//             borderColor: "#012f4a", // 边框颜色-->
<!--//             containLabel: true // 包含刻度文字在内-->
<!--//           },-->
<!--//-->
<!--//           xAxis: {-->
<!--//             type: "category",-->
<!--//             boundaryGap: false,-->
<!--//             data: [-->
<!--//               "11:41",-->
<!--//               "11:42",-->
<!--//               "11:43",-->
<!--//               "11:44",-->
<!--//               "11:45",-->
<!--//               "11:46",-->
<!--//               "11:47",-->
<!--//               "11:48",-->
<!--//               "11:49",-->
<!--//               "11:50",-->
<!--//               "11:51",-->
<!--//               "11:52"-->
<!--//             ],-->
<!--//             axisTick: {-->
<!--//               show: false // 去除刻度线-->
<!--//             },-->
<!--//             axisLabel: {-->
<!--//               color: "#4c9bfd" // 文本颜色-->
<!--//             },-->
<!--//             axisLine: {-->
<!--//               show: false // 去除轴线-->
<!--//             }-->
<!--//           },-->
<!--//           yAxis: {-->
<!--//             type: "value",-->
<!--//             axisTick: {-->
<!--//               show: false // 去除刻度线-->
<!--//             },-->
<!--//             axisLabel: {-->
<!--//               color: "#4c9bfd" // 文本颜色-->
<!--//             },-->
<!--//             axisLine: {-->
<!--//               show: false // 去除轴线-->
<!--//             },-->
<!--//             splitLine: {-->
<!--//               lineStyle: {-->
<!--//                 color: "#012f4a" // 分割线颜色-->
<!--//               }-->
<!--//             }-->
<!--//           },-->
<!--//           series: [-->
<!--//             {-->
<!--//               // name: "新增粉丝",-->
<!--//               type: "line",-->
<!--//               // true 可以让我们的折线显示带有弧度-->
<!--//               smooth: true,-->
<!--//               data: yearData[0].data[0]-->
<!--//             },-->
<!--//             {-->
<!--//               // name: "新增游客",-->
<!--//               type: "line",-->
<!--//               smooth: true,-->
<!--//               data: yearData[0].data[1]-->
<!--//             }-->
<!--//           ]-->
<!--//         };-->
<!--//         myChart1.setOption(option);-->
<!--//         // 5.点击切换效果-->
<!--//         // $(".line h2").on("click", "a", function() {-->
<!--//         //   // alert(1);-->
<!--//         //   console.log($(this).index());-->
<!--//         //   // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象-->
<!--//         //   // console.log(yearData[$(this).index()]);-->
<!--//         //   var obj = yearData[$(this).index()];-->
<!--//         //   //console.log(obj)-->
<!--//         //   option.series[0].data = obj.data[0];-->
<!--//         //   option.series[1].data = obj.data[1];-->
<!--//         //   // 需要重新渲染-->
<!--//         //   myChart1.setOption(option);-->
<!--//         // });-->
<!--//       })-->
<!--//     },-->
<!--//     equipChart(){-->
<!--//       this.$http({-->
<!--//         url: this.$http.adornUrl('/equipinfo/equipinfotable/num'),-->
<!--//         method: 'get'-->
<!--//       }).then(({data}) => {-->
<!--//         var yearData = [-->
<!--//           {-->
<!--//             year: "2020", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [24, 69, 101, 178, 55, 220, 21, 23, 12, 160, 240, 79],-->
<!--//               // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]-->
<!--//             ]-->
<!--//           }-->
<!--//           ,-->
<!--//           {-->
<!--//             year: "2021", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],-->
<!--//               //[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]-->
<!--//             ]-->
<!--//           }-->
<!--//         ];-->
<!--//         // console.log(data[0].actor)-->
<!--//         // 基于准备好的dom，初始化echarts实例-->
<!--//         var myChart1 = echarts.init(document.getElementById('main2'));-->
<!--// // 绘制图表-->
<!--//         var option = {-->
<!--//           title: {-->
<!--//             text: '丝速历史数据'-->
<!--//           },-->
<!--//           // 通过这个color修改两条线的颜色  , "#ed3f35"-->
<!--//           color: ["#6FEEEF"],-->
<!--//           tooltip: {-->
<!--//             trigger: "axis"-->
<!--//           },-->
<!--//           legend: {-->
<!--//             // 如果series 对象有name 值，则 legend可以不用写data-->
<!--//             // 修改图例组件 文字颜色-->
<!--//             textStyle: {-->
<!--//               color: "#4c9bfd"-->
<!--//             },-->
<!--//             // 这个10% 必须加引号-->
<!--//             right: "10%"-->
<!--//           },-->
<!--//           grid: {-->
<!--//             top: "20%",-->
<!--//             left: "3%",-->
<!--//             right: "4%",-->
<!--//             bottom: "3%",-->
<!--//             // show: true, // 显示边框-->
<!--//             borderColor: "#012f4a", // 边框颜色-->
<!--//             containLabel: true // 包含刻度文字在内-->
<!--//           },-->
<!--//-->
<!--//           xAxis: {-->
<!--//             type: "category",-->
<!--//             boundaryGap: false,-->
<!--//             data: [-->
<!--//               "11:41",-->
<!--//               "11:42",-->
<!--//               "11:43",-->
<!--//               "11:44",-->
<!--//               "11:45",-->
<!--//               "11:46",-->
<!--//               "11:47",-->
<!--//               "11:48",-->
<!--//               "11:49",-->
<!--//               "11:50",-->
<!--//               "11:51",-->
<!--//               "11:52"-->
<!--//             ],-->
<!--//             axisTick: {-->
<!--//               show: false // 去除刻度线-->
<!--//             },-->
<!--//             axisLabel: {-->
<!--//               color: "#4c9bfd" // 文本颜色-->
<!--//             },-->
<!--//             axisLine: {-->
<!--//               show: false // 去除轴线-->
<!--//             }-->
<!--//           },-->
<!--//           yAxis: {-->
<!--//             type: "value",-->
<!--//             axisTick: {-->
<!--//               show: false // 去除刻度线-->
<!--//             },-->
<!--//             axisLabel: {-->
<!--//               color: "#4c9bfd" // 文本颜色-->
<!--//             },-->
<!--//             axisLine: {-->
<!--//               show: false // 去除轴线-->
<!--//             },-->
<!--//             splitLine: {-->
<!--//               lineStyle: {-->
<!--//                 color: "#012f4a" // 分割线颜色-->
<!--//               }-->
<!--//             }-->
<!--//           },-->
<!--//           series: [-->
<!--//             {-->
<!--//               // name: "新增粉丝",-->
<!--//               type: "line",-->
<!--//               // true 可以让我们的折线显示带有弧度-->
<!--//               smooth: true,-->
<!--//               data: yearData[0].data[0]-->
<!--//             },-->
<!--//             {-->
<!--//               // name: "新增游客",-->
<!--//               type: "line",-->
<!--//               smooth: true,-->
<!--//               data: yearData[0].data[1]-->
<!--//             }-->
<!--//           ]-->
<!--//         };-->
<!--//         myChart1.setOption(option);-->
<!--//         // 5.点击切换效果-->
<!--//         // $(".line h2").on("click", "a", function() {-->
<!--//         //   // alert(1);-->
<!--//         //   console.log($(this).index());-->
<!--//         //   // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象-->
<!--//         //   // console.log(yearData[$(this).index()]);-->
<!--//         //   var obj = yearData[$(this).index()];-->
<!--//         //   //console.log(obj)-->
<!--//         //   option.series[0].data = obj.data[0];-->
<!--//         //   option.series[1].data = obj.data[1];-->
<!--//         //   // 需要重新渲染-->
<!--//         //   myChart1.setOption(option);-->
<!--//         // });-->
<!--//       })-->
<!--//     },-->
<!--//     weldChart(){-->
<!--//       this.$http({-->
<!--//         url: this.$http.adornUrl('/tbposition/tbposition/list'),-->
<!--//         method: 'get'-->
<!--//       }).then(({data}) => {-->
<!--//         var yearData = [-->
<!--//           {-->
<!--//             year: "2020", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [70, 16, 167, 66, 145, 210, 156, 220, 45, 134, 176, 25],-->
<!--//               // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]-->
<!--//             ]-->
<!--//           }-->
<!--//           ,-->
<!--//           {-->
<!--//             year: "2021", // 年份-->
<!--//             data: [-->
<!--//               // 两个数组是因为有两条线-->
<!--//               [34, 78, 70, 10, 190, 24, 210, 77, 135, 34, 30, 135],-->
<!--//               //[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]-->
<!--//             ]-->
<!--//           }-->
<!--//         ];-->
<!--//       console.log(data.page.list[0].position)-->
<!--//       // 基于准备好的dom，初始化echarts实例-->
<!--//       var myChart1 = echarts.init(document.getElementById('main3'));-->
<!--// // 绘制图表-->
<!--//         var option = {-->
<!--//           title: {-->
<!--//             text: '流量历史数据'-->
<!--//           },-->
<!--//           // 通过这个color修改两条线的颜色  , "#ed3f35"-->
<!--//           color: ["#6FEEEF"],-->
<!--//           tooltip: {-->
<!--//             trigger: "axis"-->
<!--//           },-->
<!--//           legend: {-->
<!--//             // 如果series 对象有name 值，则 legend可以不用写data-->
<!--//             // 修改图例组件 文字颜色-->
<!--//             textStyle: {-->
<!--//               color: "#4c9bfd"-->
<!--//             },-->
<!--//             // 这个10% 必须加引号-->
<!--//             right: "10%"-->
<!--//           },-->
<!--//           grid: {-->
<!--//             top: "20%",-->
<!--//             left: "3%",-->
<!--//             right: "4%",-->
<!--//             bottom: "3%",-->
<!--//             // show: true, // 显示边框-->
<!--//             borderColor: "#012f4a", // 边框颜色-->
<!--//             containLabel: true // 包含刻度文字在内-->
<!--//           },-->
<!--//-->
<!--//           xAxis: {-->
<!--//             type: "category",-->
<!--//             boundaryGap: false,-->
<!--//             data: [-->
<!--//               "11:41",-->
<!--//               "11:42",-->
<!--//               "11:43",-->
<!--//               "11:44",-->
<!--//               "11:45",-->
<!--//               "11:46",-->
<!--//               "11:47",-->
<!--//               "11:48",-->
<!--//               "11:49",-->
<!--//               "11:50",-->
<!--//               "11:51",-->
<!--//               "11:52"-->
<!--//             ],-->
<!--//             axisTick: {-->
<!--//               show: false // 去除刻度线-->
<!--//             },-->
<!--//             axisLabel: {-->
<!--//               color: "#4c9bfd" // 文本颜色-->
<!--//             },-->
<!--//             axisLine: {-->
<!--//               show: false // 去除轴线-->
<!--//             }-->
<!--//           },-->
<!--//           yAxis: {-->
<!--//             type: "value",-->
<!--//             axisTick: {-->
<!--//               show: false // 去除刻度线-->
<!--//             },-->
<!--//             axisLabel: {-->
<!--//               color: "#4c9bfd" // 文本颜色-->
<!--//             },-->
<!--//             axisLine: {-->
<!--//               show: false // 去除轴线-->
<!--//             },-->
<!--//             splitLine: {-->
<!--//               lineStyle: {-->
<!--//                 color: "#012f4a" // 分割线颜色-->
<!--//               }-->
<!--//             }-->
<!--//           },-->
<!--//           series: [-->
<!--//             {-->
<!--//               // name: "新增粉丝",-->
<!--//               type: "line",-->
<!--//               // true 可以让我们的折线显示带有弧度-->
<!--//               smooth: true,-->
<!--//               data: yearData[0].data[0]-->
<!--//             },-->
<!--//             {-->
<!--//               // name: "新增游客",-->
<!--//               type: "line",-->
<!--//               smooth: true,-->
<!--//               data: yearData[0].data[1]-->
<!--//             }-->
<!--//           ]-->
<!--//         };-->
<!--//         myChart1.setOption(option);-->
<!--//         // 5.点击切换效果-->
<!--//         // $(".line h2").on("click", "a", function() {-->
<!--//         //   // alert(1);-->
<!--//         //   console.log($(this).index());-->
<!--//         //   // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象-->
<!--//         //   // console.log(yearData[$(this).index()]);-->
<!--//         //   var obj = yearData[$(this).index()];-->
<!--//         //   //console.log(obj)-->
<!--//         //   option.series[0].data = obj.data[0];-->
<!--//         //   option.series[1].data = obj.data[1];-->
<!--//         //   // 需要重新渲染-->
<!--//         //   myChart1.setOption(option);-->
<!--//         // });-->
<!--//       })-->
<!--//     },-->
<!--    init(stitle){-->
<!--      this.dialogVisible = true;-->
<!--      console.log('子组件名称为' + stitle)-->
<!--      this.nowData()-->
<!--      // console.log('子组件ename为' + ename)-->
<!--      // this.empChart();-->
<!--      // this.posChart();-->
<!--      // this.equipChart();-->
<!--      // this.weldChart();-->
<!--      this.dataListLoading = false-->
<!--      }-->
<!--    }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->

<!--</style>-->
